<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>

    </script>

    <script type="text/html" id="toolbarDemo">

        <div class="demoTable">

            <div class="layui-inline">

                <input class="layui-input" name="id" id="demoReload" autocomplete="off"  placeholder ="请输入名字">
            </div>
            <button class="layui-btn"  id="btnserach" lay-event="reload" > 搜索</button>


        </div>

    </script>
    <div id="updatediv" style="display: none">
        <form class="layui-form" action="" lay-filter="formTest">
         <input type="hidden" name="aid">
            <div class="layui-form-item">
                <label class="layui-form-label">宣传内容</label>
                <div class="layui-input-block">
                    <input type="text" name="nr" required lay-verify="required"
                           placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <table class="layui-hide" id="test" lay-filter="test"></table>

    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

    <script>

        layui.use(['table','form'], function() {
            var table = layui.table;
            var $ = layui.$;
            var form = layui.form;

            var depttab = table.render({
                elem: '#test'
                , url: '../ziti/showall'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    {field: 'aid', title: '序号', sort: true}
                    , {field: 'nr', title: '课程介绍'}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]]
                , page: true
                , done: function (res, curr, count) {
                    $("#demoReload").val(res.nr);
                }
            });


            //form自动赋值


            //提交
            table.on('tool(test)', function (obj) {

                var data = obj.data;
                if (obj.event === 'edit') {
                    var uplayer = layer.open({
                        type: 1
                        , anim: 3
                        , content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                    form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                        "aid": data.aid
                        , "nr": data.nr
                    });

                    form.on('submit(formDemo)', function (data) {
                        layer.close(uplayer);

                        $.ajax({
                            url: "../ziti/update"
                            , type: "post"
                            , data: data.field
                            , success: function (d) {
                                console.log(d, typeof(d));
                                if (d === 1) {
                                    layer.msg('修改已成功！！！', {
                                        icon: 1,
                                        time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                    }, function () {
                                        //更新表格
                                        depttab.reload();
                                    });
                                }
                                else if (d === 0) {
                                    layer.msg('修改失败，不能修改id，请重新修改', {
                                        icon: 1,
                                        time: 1500
                                    });
                                }
                            }
                        });
                        return false;
                    });
                }
            });
        });



    </script>


    </body>
    
</html>